<template>
  <div class="home">
    <header class="hero">
      <h1 class="title">数学学习可视化</h1>
      <p class="subtitle">通过交互式图形帮助理解抽象的数学概念</p>
      <div class="actions">
        <router-link to="/learn" class="btn btn-primary">开始学习</router-link>
        <router-link to="/practice" class="btn btn-secondary">练习中心</router-link>
      </div>
    </header>

    <section class="features">
      <h2>学习特色</h2>
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">📊</div>
          <h3>直观可视化</h3>
          <p>让抽象的数学概念变得直观易懂</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🎮</div>
          <h3>交互式学习</h3>
          <p>通过拖拽、点击等操作来理解数学</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📈</div>
          <h3>渐进式学习</h3>
          <p>从小学到大学的完整数学知识体系</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🎯</div>
          <h3>个性化进度</h3>
          <p>根据学习进度智能推荐内容</p>
        </div>
      </div>
    </section>

    <section class="subjects">
      <h2>学习内容</h2>
      <div class="subject-grid">
        <div class="subject-card" @click="goToLearn('number-line')">
          <h3>数轴与数字</h3>
          <p>理解正负数、数轴上的位置关系</p>
        </div>
        <div class="subject-card" @click="goToLearn('fraction')">
          <h3>分数概念</h3>
          <p>分数的可视化表示和运算</p>
        </div>
        <div class="subject-card" @click="goToLearn('geometry')">
          <h3>几何图形</h3>
          <p>面积、周长、体积的计算</p>
        </div>
        <div class="subject-card" @click="goToLearn('function')">
          <h3>函数图像</h3>
          <p>函数图像的绘制和分析</p>
        </div>
      </div>
    </section>

    <!-- 新增：数学可视化演示区 -->
    <section class="demo-section">
      <h2>立即体验数学可视化</h2>
      <p class="demo-subtitle">拖拽数字到数轴上的正确位置，感受直观的数学学习</p>

      <div class="number-line-demo">
        <div class="demo-header">
          <h3>数轴与数字演示</h3>
          <p>将下方的数字拖拽到数轴上正确的位置</p>
        </div>

        <div class="number-line-container">
          <div class="number-line">
            <div class="line"></div>
            <div class="tick-marks">
              <div class="tick" v-for="i in 11" :key="i" :style="{ left: `${(i - 1) * 10}%` }">
                <span class="tick-label">{{ i - 6 }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="number-draggables">
          <div
            v-for="num in draggableNumbers"
            :key="num.id"
            class="draggable-number"
            :class="{ dragged: num.dragged }"
            :style="{ left: num.x + 'px', top: num.y + 'px' }"
            @mousedown="startDrag($event, num)"
            @touchstart="startDrag($event, num)"
          >
            {{ num.value }}
          </div>
        </div>

        <div class="demo-actions">
          <button class="btn btn-primary" @click="resetDemo">重置演示</button>
          <button class="btn btn-secondary" @click="goToLearn('number-line')">开始学习</button>
        </div>

        <div class="demo-tip">
          <p>💡 提示：登录后可以体验完整的学习功能，包括进度保存、个性化推荐等</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
// import { questionsApi } from '@/api/questions'

const router = useRouter()

// 数轴演示相关状态
interface DraggableNumber {
  id: number
  value: number
  x: number
  y: number
  dragged: boolean
}

const draggableNumbers = ref<DraggableNumber[]>([
  { id: 1, value: -3, x: 50, y: 200, dragged: false },
  { id: 2, value: 0, x: 150, y: 200, dragged: false },
  { id: 3, value: 2, x: 250, y: 200, dragged: false },
  { id: 4, value: -1, x: 350, y: 200, dragged: false },
])

let isDragging = false
let currentDragElement: DraggableNumber | null = null
let startX = 0
let startY = 0

// 获取题目类型列表
// const obtainTheTypeOfQuestion = async () => {
//   try {
//     const response = await questionsApi.getQuestionTypes()
//     console.log(response)
//   } catch (error) {
//     console.error('获取题目类型列表失败:', error)
//   }
// }

const goToLearn = (subject: string) => {
  router.push({
    name: 'learn',
    query: { subject },
  })
}

// 数轴演示相关函数
const startDrag = (event: MouseEvent | TouchEvent, num: DraggableNumber) => {
  event.preventDefault()
  isDragging = true
  currentDragElement = num

  if (event instanceof MouseEvent) {
    startX = event.clientX - num.x
    startY = event.clientY - num.y
  } else if (event instanceof TouchEvent) {
    startX = event.touches[0].clientX - num.x
    startY = event.touches[0].clientY - num.y
  }

  num.dragged = true

  // 添加全局事件监听
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
  document.addEventListener('touchmove', onDrag)
  document.addEventListener('touchend', stopDrag)
}

const onDrag = (event: MouseEvent | TouchEvent) => {
  if (!isDragging || !currentDragElement) return

  let clientX: number, clientY: number

  if (event instanceof MouseEvent) {
    clientX = event.clientX
    clientY = event.clientY
  } else if (event instanceof TouchEvent) {
    clientX = event.touches[0].clientX
    clientY = event.touches[0].clientY
  } else {
    return
  }

  currentDragElement.x = clientX - startX
  currentDragElement.y = clientY - startY
}

const stopDrag = () => {
  if (currentDragElement) {
    currentDragElement.dragged = false
    currentDragElement = null
  }
  isDragging = false

  // 移除全局事件监听
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
  document.removeEventListener('touchmove', onDrag)
  document.removeEventListener('touchend', stopDrag)
}

const resetDemo = () => {
  draggableNumbers.value = [
    { id: 1, value: -3, x: 50, y: 200, dragged: false },
    { id: 2, value: 0, x: 150, y: 200, dragged: false },
    { id: 3, value: 2, x: 250, y: 200, dragged: false },
    { id: 4, value: -1, x: 350, y: 200, dragged: false },
  ]
}

// obtainTheTypeOfQuestion()
</script>

<style lang="less" scoped>
@import '@/styles/variables.less';

// 自定义变量
@secondary-color: #667eea;
@secondary-hover: #764ba2;
@shadow-demo: 0 8px 24px rgba(0, 0, 0, 0.1);

// 主容器
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

// 英雄区域
.hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, @secondary-color 0%, @secondary-hover 100%);
  color: white;
  border-radius: @border-radius-lg;
  margin-bottom: 60px;
}

.title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 16px;
  font-weight: bold;
}

.subtitle {
  font-size: clamp(1rem, 3vw, 1.2rem);
  margin-bottom: 32px;
  opacity: 0.9;
}

.actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

// 按钮样式
.btn {
  padding: 12px 24px;
  border-radius: @border-radius-sm;
  text-decoration: none;
  font-weight: 600;
  .transition();

  &.btn-primary {
    background: @primary-color;
    color: white;

    &:hover {
      background: @primary-hover;
      transform: translateY(-2px);
    }
  }

  &.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;

    &:hover {
      background: white;
      color: @secondary-color;
    }
  }
}

// 功能区域
.features {
  margin-bottom: 60px;
}

.features h2,
.subjects h2 {
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 24px;
  color: @text-primary;
}

.feature-grid,
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card,
.subject-card {
  padding: 20px;
  border-radius: @border-radius;
  background: white;
  box-shadow: @shadow;
  .transition();
  cursor: pointer;
  height: 100%;
  .flex-column();

  &:hover {
    transform: translateY(-4px);
    box-shadow: @shadow-md;
  }
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.feature-card h3,
.subject-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: @text-primary;
}

.feature-card p,
.subject-card p {
  color: @text-secondary;
  line-height: 1.5;
  flex: 1;
}

// 响应式设计
@media (max-width: 768px) {
  .home {
    padding: 20px 16px;
  }

  .hero {
    padding: 40px 16px;
    margin-bottom: 40px;
  }

  .features {
    margin-bottom: 40px;
  }

  .feature-grid,
  .subject-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feature-card,
  .subject-card {
    padding: 16px;
  }
}

// 数轴演示区域样式
.demo-section {
  margin-bottom: 60px;

  h2 {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 16px;
    color: @text-primary;
  }
}

.demo-subtitle {
  text-align: center;
  color: @text-secondary;
  margin-bottom: 40px;
  font-size: 1.1rem;
}

.number-line-demo {
  background: white;
  border-radius: @border-radius-lg;
  padding: 40px;
  box-shadow: @shadow-demo;
  max-width: 800px;
  margin: 0 auto;
}

.demo-header {
  text-align: center;
  margin-bottom: 32px;

  h3 {
    font-size: 1.5rem;
    color: @text-primary;
    margin-bottom: 8px;
  }

  p {
    color: @text-secondary;
  }
}

.number-line-container {
  margin: 40px 0;
  position: relative;
}

.number-line {
  position: relative;
  height: 60px;
  background: @bg-light;
  border-radius: @border-radius-sm;
  border: 2px solid @border-light;
}

.line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: @text-primary;
  transform: translateY(-50%);
}

.tick-marks {
  position: relative;
  height: 100%;
}

.tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: @text-secondary;
}

.tick-label {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: @text-primary;
  font-weight: 500;
}

.number-draggables {
  position: relative;
  height: 120px;
  margin: 20px 0;
}

.draggable-number {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #2196f3;
  color: white;
  border-radius: 50%;
  .flex-center();
  font-weight: bold;
  cursor: grab;
  user-select: none;
  .transition(all, 0.2s);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
  }

  &.dragged {
    cursor: grabbing;
    transform: scale(1.2);
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.5);
  }
}

.demo-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 32px 0;
}

.demo-tip {
  text-align: center;
  padding: 16px;
  background: #e3f2fd;
  border-radius: @border-radius-sm;
  border-left: 4px solid #2196f3;

  p {
    margin: 0;
    color: @text-light;
    font-size: 0.9rem;
  }
}
</style>
